<template>
  <nut-tabbar
    v-if="isShowTabbar"
    :unactive-color="unactiveColor"
    :active-color="activeColor"
    :model-value="activeTab"
    @tab-switch="onTabSwitch"
    bottom
    safe-area-inset-bottom
    :customStyle="{ borderRadius: '20rpx 20rpx 0 0' }"
    placeholder>
    <nut-tabbar-item v-for="(item, index) in tabbarList" :key="index" :tab-title="item.navigateName">
      <template #icon="props">
          <img v-if="props.active" :src="item.selectImg" />
          <img v-else :src="item.unselectImg" />
        </template>
    </nut-tabbar-item>
  </nut-tabbar>
</template>

<script setup lang="ts">
import { useShopTabbarStore } from '@/store'
import { onShow } from '@dcloudio/uni-app'
const isShowTabbar = ref(true)
const tabbarStore = useShopTabbarStore()
const tabbarList = computed(() => tabbarStore.tabbarList)
const activeTab = computed(() => tabbarStore.activeTab)
const activeColor = computed(() => tabbarStore.activeColor)
const unactiveColor = computed(() => tabbarStore.unactiveColor)
const onTabSwitch = (item: any, index: number) => {
  console.log(item, index)
  tabbarStore.tabSwitch(index)
}

const updateActive = () => {
  const pages = getCurrentPages() // 获取当前页面栈
  const currentPage = pages[pages.length - 1] // 当前页面
  const currentPath = `/${currentPage.route}` // 获取当前页面路径
  const index = tabbarList.value.findIndex((item) => item.linkUrl === currentPath)

  if (index !== -1 && index !== activeTab.value) {
    tabbarStore.setActiveTab(index)
  }
}
onShow(() => {
  updateActive()
})

</script>
<style>
page {
  --nut-tabbar-border-top: 1px solid #fff;
  --nut-tabbar-height: 60px;
}
</style>

